@charset "UTF-8";
<!--
 ########:: ##:::: ##: ##::: ##:
 ##.... ##: ##:::: ##: ###:: ##:
 ##:::: ##: ##:::: ##: ####: ##:
 ########:: ##:::: ##: ## ## ##:
 ##.... ##: ##:::: ##: ##. ####:
 ##:::: ##: ##:::: ##: ##:. ###:
 ########::. #######:: ##::. ##:
.......::::.......:::..::::..::   
-->

/*;.;.;.;.;.;.;.;.;.;.;
.;.;.; CSS RESET ;.;.;.
;.;.;.;.;.;.;.;.;.;.;*/

	* {
		margin: 0;
		padding: 0;
		color: #000;
	}

/*;.;.;.;.;.;.;.;.;.
.;.;.; CANVAS .;.;.;
;.;.;.;.;.;.;.;.;.*/

	main#canvas {
		width: 98.6vw;
		height: 45.65vw;
		margin: 5.6vh auto 0 auto;
	}

/*;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; ARTIST CREDIT ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;*/

	figcaption {
		width: 68.6vw;
		margin: 0.5vw auto 0 auto;
		font-size: 12pt;
		text-align: right;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

/*;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; HTML5 SEMANTIC TAGS ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;*/

	section {
		width: 20px;
		height: 480px;
		float: left;
	}

		article {
			width: 60%;
			height: 80.2%;
			margin-top: 40%;
			margin-left: 20%;
		}

			figure {
				width: 17%;
				height: 97.8%;
				margin-top: 5.5%;
				margin-left: 6.4%;
				float: left;
			}

/*;.;.;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; CSS COLOR CLASSES ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;.;.;*/

	.paleyellow {
		background-color: #ffe8ad; width: 55px;
		height: 480px;
	}

	.eggplant {
		background-color: #3c303b; width: 50px;
		height: 480px;
	}

	.taupe {
		background-color: #5e584c; width: 30px;
		height: 480px;
	}

	.beige {
		background-color: #c4b292; width: 25px;
		height: 480px;
	}

	.coffee {
		background-color: #97795d; width: 29px;
		height: 480px;
	}

	.olive {
		background-color: #4c473b; width: 29px;
		height: 480px; 
	}

	.mediumgray {
		background-color: #53554a; width: 20px;
		height: 480px;
	}

.hummus {
		background-color: #c4b292; width: 30px;
		height: 480px;
	}


.lightbrown {
	background-color:#e1d1a7;}


.superlightyellow {
	background-color:#f6ecbd;width: 25px;
		height: 480px;}

.whiteyellow {
	background-color:#f7e7b7; width: 10px;
		height: 480px;}

.brownyellow {
	background-color:#cfc49f; width: 25px;
		height: 480px;}


.lighteggplant {
	background-color:#4a4049; width: 40px;
		height: 480px;}

.muddyyellow {
	background-color:#e5d7ae; width: 50px;
		height: 480px;}
/*;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;
.;.;.; HOVER PSEUDO-CLASS INTERACTIONS ;.;.;.
;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;.;*/

	.paleyellow:hover {
		background-color: olive;
	}

	.coffee:hover {
		background-color: red;
	}

	.beige:hover {
		background-color: blue;
	}

	.hummus:hover {
		background-color: white;
	}

	.taupe:hover {
		background-color: blue;
	}

	.lightbrown:hover {
		background-color: red;
	}

	.olive:hover {
		background-color: deeppink;
	}


	.muddyyellow:hover {
		background-color: black;
	}

	.lighteggplant:hover {
		background-color: #5e584c;
	}

	.eggplant:hover {
		background-color: orangered;
	}

	.olive:hover {
		background-color: #c4b292;
	}